<template>
	<view class="gui-flex1">
		<!-- 主页头部 -->
		<!-- 主页内容 -->
		<view class="app">

			<!-- 内容 -->
			<!-- <scroll-view scroll-y='true' style="height: 95%;" class="bg"
					:style="'margin-top:'+navBarHeight+'rpx;background-image: url('+uimg+bg_img+')'"
					@scroll="handleScroll">
					<view class="list-view"> -->
			<!-- 头像 -->
			<view class="flex-center-cz">
				<view style="display: flex;" @click="to_info()">
					<view class="avatar" v-if="user.sex == 1">
						<image src="../../static/tiezai.png"></image>
					</view>
					<view class="avatar" v-if="user.sex == 0">
						<image src="../../static/ganghua.png"></image>
					</view>
					<view style="margin-top: 15rpx;margin-left: 25rpx;">
						<view>
							<text style="font-size: 33rpx;" class="gui-bold">{{user.real_name}}</text>
						</view>
						<view style="margin-top: 15rpx;padding-bottom: 8rpx; text-align: center;
										border-radius: 10rpx;" class="bg_lucency">
							<text style="font-size: 25rpx;color: #696969;">{{user.orga.name}}</text>
						</view>
					</view>
				</view>
				<view class="flex-center-sp">

					<navigator url="/pages/login/qrcode" class="gui-icons gui-color-white"
						style="margin-right: 20rpx;font-size: 40rpx;">&#xe61d;</navigator>
				</view>
			</view>
			<!-- 积分 -->
			<view>
				<view class="Integral gui-border bg_lucency shadow"
					style="box-shadow: 4.9px 9.8px 9.8px hsl(0deg 0% 0% / 0.35);">
					<view style="width: 100%;height: 60%;display: flex;">
						<view class="integral-left" @click="my_integral()">
							<view class="integral-left-view">
								<text style="color: red;font-size: 40rpx;" class="gui-bold">{{score}}</text>
								<view>
									<text style="font-size: 26rpx;margin-left: 20rpx;"
										class="gui-icons gui-block gui-bold">我的积分
										<!-- &#xe601; -->
									</text>
								</view>
							</view>
						</view>
						<view class="integral-right" @click="exchange()">
							<view class="integral-left-view">
								<image src="../../static/icon/Payment.png"
									style="width: 60rpx;height: 60rpx;position: relative;margin-top: -10rpx;">
								</image>
								<view>
									<text style="font-size: 26rpx;margin-left: 20rpx;"
										class="gui-icons gui-block gui-bold">
										积分换钢豆
										<!-- &#xe601; -->
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 学习服务 -->
			<view class="content gui-border bg_lucency gui-border gui-border-radius-large "
				style="box-shadow: 2.7px 5.4px 5.4px hsl(0deg 0% 0% / 0.42);">
				<!-- <view class="gui-h4" style="margin-top: 20rpx;margin-left: 20rpx;">学习服务</view> -->
				<view style="margin-top: 20rpx;margin-left: 20rpx;">
					<text style="color: #23238e;font-size: 32rpx;">学习服务</text>
				</view>

				<view class="gui-grid gui-dark-bg-level-3">
					<view v-for="(item,index) in  StuInfo" class="gui-grid-item grid4"
						@click="nav_to1(item.url, item.title)">
						<image mode="aspectFill" class="gui-grid-icon-img" :src="item.icon"></image>
						<text class="gui-grid-text gui-primary-text">{{item.title}}</text>
					</view>
				</view>

			</view>
			<!-- 综合管理 -->
			<view class="footer gui-border bg_lucency gui-border gui-border-radius-large "
				style="box-shadow: 2.7px 5.4px 5.4px hsl(0deg 0% 0% / 0.42);">
				<view style="margin-top: 20rpx;margin-left: 20rpx;">
					<strong><text style="color: #23238e;font-size: 32rpx;">综合管理</text></strong>
				</view>
				<view class="gui-list-items" v-for="(item,index) in manage" @click="nav_to(item.url, item.title)">
					<image :src="$comm.get_img(item.icon)"
						style="height: 40rpx;width: 40rpx;margin: 20rpx; border-radius: 16rpx;"></image>
					<view class="gui-list-body gui-border-b">
						<view class="">
							<text class="gui-list-title-text">{{item.title}}</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray"
						style="margin-right: 20rpx;">&#xe601;</text>
				</view>


			</view>

			<view class="footer gui-border bg_lucency gui-border gui-border-radius-large gui-margin-top "
				style="box-shadow: 2.7px 5.4px 5.4px hsl(0deg 0% 0% / 0.42);">
				<!-- <view class="gui-list-items" @click="qr_code()">
							<text class="gui-list-icon gui-icons gui-color-blue">&#xe66c;</text>
							<view class="gui-list-body gui-border-b">
								<view class="gui-list-title">
									<text class="gui-list-title-text">扫一扫</text>
								</view>
							</view>
							<text class="gui-list-arrow-right gui-icons gui-color-gray"
								style="margin-right: 20rpx;">&#xe601;</text>
						</view> -->
				<view class="gui-list-items" @click="config()">
					<text class="gui-list-icon gui-icons gui-color-blue">&#xe613;</text>
					<view class="gui-list-body gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text">设置</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray"
						style="margin-right: 20rpx;">&#xe601;</text>
				</view>

				<view class="gui-list-items" @click="logout()">
					<text class="gui-list-icon gui-icons gui-color-red">&#xe62e;</text>
					<view class="gui-list-body gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text">退出登录</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray"
						style="margin-right: 20rpx;">&#xe601;</text>
				</view>
			</view>
			<!-- <view style="margin-bottom: 200rpx;line-height: 100rpx;" class="gui-text-center gui-color-gray">
					V{{version}}-{{navBarHeight}}
				</view> -->
		</view>
	</view>
</template>
<script>
	var self;
	import artciles from '@/Grace6/demoData/article.js';
	

	export default {
		data() {
			return {
				// touxiang: '../../static/tiezai.png',
				user: uni.getStorageSync("userInfo"),
				uimg: 'https://app.lgwisdomunion/API-RESOURCE/webView?fid=',
				bg_img: uni.getStorageSync("bgimg"),
				MyScore: 0,
				StuInfo: [{
						title: "学习记录",
						icon: "../../static/img/study.png",
						url: '/pages/MY/courseRcords'
					},
					{
						title: "闯关记录",
						icon: "../../static/img/CG.png",
						url: '/pages/MY/study'
					},
					{
						title: "考试记录",
						icon: "../../static/img/Ks.png",
						url: '/pages/MY/examRecords'
					},
					{
						title: "错题回顾",
						icon: "../../static/img/err.png",
						url: '/pages/MY/mistakes'
					},
					{
						title: "课程收藏",
						icon: "../../static/img/cource.png",
						url: '/pages/MY/courseCollect'
					},
					{
						title: "闯关排行",
						icon: "../../static/img/win.png",
						url: '/pages/MY/mabSort'
					},
					{
						title: "权益保障",
						icon: "../../static/img/bao.png",
						url: '/pages/MY/guarantee'
					},
					{
						title: "中奖记录",
						icon: "../../static/img/zj.png",
						url: '/pages/MY/winningRecords'
					},
				],
				manage: uni.getStorageSync("MyMenu"),
				head_nav: "",
				head_icon: "",
				head_title: "",
				tabBarHeight: 0,
				ver: 0,
				navBarHeight: 80,
				score: 0,
				version: ''
			}
		},
		onReady() {
			// 页面加载完成时，设置导航栏样式
			this.head_nav = "0"
			this.head_icon = "backgroundColor: rgba(255, 255, 255,0)"
			// this.head_title = 'opacity:0'
			this.navBarHeight = this.paddingTopValue()

			console.log(this.navBarHeight)

			// // #ifdef APP-PLUS
			// if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
			// 	// console.log('当前为App环境');
			// 	plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {
			// 		self.version = appInfo.version
			// 	});
			// } else {
			// 	console.log('当前非App环境');
			// }
			// // #endif
		},
		created() {
			this.get_menu();
			this.getMyScore()
		},
		methods: {
			// test_web() {
			// 	let url = "https://jf.boyaltd.cn/more_feeitems?idNo=" + this.user.idNo + "&realName=" + this.user
			// 		.realName + "&to_wx=dd"
			// 	this.$comm.nav_to(url);
			// },
			get_menu() {
				let self = this;
				this.$boya.NGet("/app/get_menu", {
					category: '综合管理'
				}, function(res) {
					console.log("get_servce", res);

					self.manage = res.data[0].app_menu

					uni.setStorageSync("MyMenu", res.data.app_menu);
				});
			},
			upload_old() {
				uni.navigateTo({
					url: "/pages/MY/upload_old"
				})
			},
			config() {
				console.log("config");
				uni.navigateTo({
					url: "../MY/config",
					fail(err) {
						console.log(err);
					}
				})
			},
			paddingTopValue() {
				const systemInfo = uni.getSystemInfoSync()
				const statusBarHeight = systemInfo.statusBarHeight // 状态栏高度
				console.log(statusBarHeight)
				return statusBarHeight
			},
			handleScroll(event) {
				const scrollTop = event.detail.scrollTop
				if (scrollTop <= 0) {
					// 页面滚动到顶部
					this.head_nav = "0"
					this.head_icon = "backgroundColor: rgba(255, 255, 255,0)"
					this.head_title = 'opacity:0'
				} else {
					// 页面滚动到非顶部
					const opacity = scrollTop / 100 > 1 ? 1 : scrollTop / 100
					this.head_nav = opacity
					this.head_title = 'opacity:' + opacity
				}
			},
			to_info() {
				uni.navigateTo({
					url: '/pages/MY/update_userinfo?img=' + this.touxiang
				})
			},
			my_integral() {
				// this.$boya.msg('暂未开放')
				uni.navigateTo({
					url: "/pages/points/points"
				})
			},
			exchange() {
				// this.$boya.msg('暂未开放')
			},
			getMyScore() {
				let self = this;
				this.$boya.NPost("/app/user/score", null, (res) => {
					console.log("getMyScore", res);
					self.score = res.data;
				})
				// this.$lg.Get("/APP/sysUser/getMyScore", {}, (res) => {
				// 	console.log(res)
				// 	this.MyScore = res.data
				// })
			},
			logout() {
				this.$comm.logout();
			},
			clear() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: "/pages/login/login"
				});
			},
			nav_to(url, title) {
				this.$comm.nav_to(url);
			},
			nav_to1(url, title) {
				console.log('title: ', title);
				// if (title == '考试记录') {
				uni.navigateTo({
					url: url + '?title=' + title
				});

				// } else {
				// 	this.$boya.msg('暂未开放')
				// }

			},
			test() {
				uni.navigateTo({
					url: "/pages/test/pay_test"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gui-flex1 {
		width: 100vw;
		min-height: 100vh;
		background: url('../../static/homePage/xinBj.png') 100% 100% / 100% 100%;
		// background: linear-gradient(to right, #81B7F2, #56A3ED, #56A3ED, #61A7ED, #86BBF5, #86BBF5);
	}

	.app {
		width: 95%;
		min-height: 100vh;
		margin: 0 auto;
		margin-top: 85rpx;
		margin-bottom: 40rpx;
	}

	.flex-center-cz {
		display: flex;
		justify-content: space-between;
	}

	.flex-center-sp {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	//综合管理
	.footer {
		width: 100%;
		background-color: white;
	}

	//学习服务
	.grid4 {
		width: 177rpx;
		padding-top: 33rpx;
	}

	.content {
		width: 100%;
		height: 420rpx;
		background-color: white;
		margin: 20rpx 0;
	}

	//个人信息展示
	.integral-left-view {
		width: 180rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
		align-items: center;
	}

	.integral-left {
		width: 50%;
		height: 100%;
		border-right: 2px solid #ccc;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.integral-right {
		width: 50%;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.Integral {
		margin-top: 20rpx;
		height: 150rpx;
		box-shadow: #ccc 0 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
	}

	.bg_lucency {
		background-color: white;
		// background-color: rgba(255, 255, 255, 0.6);
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		overflow: hidden;
		border-radius: 50%;
		border: 2px solid white;
		box-sizing: border-box;
		background-color: white;
	}

	.avatar image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	// 页面背景加导航
	// .list-view {
	// 	z-index: 2;
	// 	position: relative;
	// 	padding-bottom: 15%;
	// 	padding: 80rpx 20rpx 0 20rpx;
	// 	height: 100%;
	// }

	// .bg {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	background-size: cover;
	// 	background-repeat: no-repeat;
	// 	z-index: 1;
	// }

	// .head {
	// 	height: calc(var(--status-bar-height)+100rpx);
	// 	z-index: 99;
	// 	width: 100%;
	// 	position: fixed;
	// 	top: var(--window-top);
	// 	// padding-top: calc(var(--status-bar-height)+55rpx);
	// 	align-items: center;
	// }

	// .shadow {
	// box-shadow: 4.9px 9.8px 9.8px hsl(0deg 0% 0% / 0.35);
	// }
</style>